/*
 * @Author: FMC
 * @Date: 2024-07-10 20:13:46
 * @LastEditors: FMC
 * @LastEditTime: 2024-07-11 01:14:06
 * @FilePath: \three-run-game\src\views\react-three\react-three.jsx
 * @Description:
 */
/*
 * @Author: FMC
 * @Date: 2024-07-07 20:25:05
 * @LastEditors: FMC
 * @LastEditTime: 2024-07-10 20:32:26
 * @FilePath: \three-run-game\src\views\react-three\react-three.jsx
 * @Description:
 */
import BaseEnv from "./base-env/base-env.jsx";
import { Canvas } from "@react-three/fiber";
import Level from "./meshes/level/level.jsx";
import { Physics } from "@react-three/rapier";
import Player from "./meshes/player/player.jsx";
import { KeyboardControls,Loader } from "@react-three/drei";
import DLight from "./d-light/d-light.jsx";
import UI from "../ui/ui.jsx";
import useGame from "../../stores/useGame.js";
import Efftects from "./efftects/efftects.jsx";
import { Suspense } from "react";
function ReactThree() {
  const blockCount = useGame((state) => state.blockCount);
  const blockSeed = useGame((state) => state.blockSeed);
  // console.log('bears',bears)
  return (
    <>
      <KeyboardControls
        map={[
          {
            name: "forward",
            keys: ["ArrowUp", "KeyW"],
          },
          {
            name: "right",
            keys: ["ArrowRight", "KeyD"],
          },
          {
            name: "left",
            keys: ["ArrowLeft", "KeyA"],
          },
          {
            name: "back",
            keys: ["ArrowDown", "KeyS"],
          },
          {
            name: "jump",
            keys: ["Space"],
          },
        ]}
      >
        <Canvas
          shadows
          dpr={[1, 2]}
          camera={{
            fov: 45,
            near: 0.1,
            far: 200,
            position: [2.5, 4, 6],
          }}
        >
          <color args={["#252731"]} attach={"background"} />
          <Suspense fallback={null}>
            <BaseEnv />
            <Physics>
              <DLight />
              <Level count={blockCount} seed={blockSeed}></Level>
              <Player />
            </Physics>
            <Efftects />
          </Suspense>
          {/* <axesHelper args={[5, 5, 5]}></axesHelper> */}
        </Canvas>
        <Loader/>
        <UI />
      </KeyboardControls>
    </>
  );
}

export default ReactThree;
